<template>
  <div class="state-container">
    <template v-if="rtuPortDisplays.length <= 6">
      <dl v-for="(item,index) in rtuPortDisplays" :key="index">
        <dt :class="getClass(item)">{{ getState(item) }}<em>{{ item.unit }}</em></dt>
        <dd class="iconfont" :class="item.iconfont" />
        <dd class="name">{{ item.name }}</dd>
      </dl>
    </template>
    <template v-else>
      <dl v-for="(item,index) in rtuPortDisplays" :key="index" class="min-width">
        <dt :class="getClass(item)">{{ getState(item) }}<em>{{ item.unit }}</em></dt>
        <dd class="iconfont" :class="item.iconfont" />
        <dd class="name">{{ item.name }}</dd>
      </dl>
    </template>
  </div>
</template>

<script>
import { getDeviceState } from '@/utils/device'
import { runDict, closeDict } from '@/utils/constant'
export default {
  props: {
    device: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    rtuPortDisplays() {
      const res = this.device.rtuPortDisplays || this.device.rtu_port_displays || []
      return res.filter((val) => {
        return +val.show_state > 0
      })
    },
    states() {
      return this.device.states || {}
    }
  },
  methods: {
    getState(item) {
      return getDeviceState(this.states[item.namekey], item, this.states)
    },
    getClass(item) {
      if (runDict.includes(this.getState(item))) {
        return 'color-success'
      }
      if (closeDict.includes(this.getState(item))) {
        return 'color-danger'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  margin-left:auto;
}
.state-container{
  display:flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  margin-top: -20px;
  padding: 12px 0;
  dl{
    display:flex;
    flex:1;
    flex-direction:column;
    margin-top:32px;
    text-align:center;
    color:#666;
    // &.min-width{
    //   width: calc(100% / 12);
    //   min-width: calc(100% / 12);
    //   max-width: calc(100% / 12);
    // }
    dt{
      font-weight:bold;
      font-size:16px;
      color:#333;
      &.color-success{
        color:#13ce66
      }
      &.color-warning{
        color:#FFBA00
      }
      &.color-danger{
        color:#ff4949
      }
      em{
        font-style:normal;
        font-size:14px;
        padding-left:4px;
      }
    }
    dd{
      &.iconfont{
        font-size: 18px;
        margin-top: 12px;
      }
      &.name{
        font-size: 12px;
        margin-top: 14px;
      }
    }
  }
}
</style>
